<template>
  <div>
    <div class="al-box-container">

      <ALImage
              class="al-width-50"
              src="https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_my_password_d6kg.png"/>

      <div>
        <el-form :model="formInfo" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <el-form-item
                  prop="oldPassword"
                  label="旧密码"
                  :rules="{ required: true, message: '请输入旧密码', trigger: 'blur' }"
          >
            <el-input type="password" v-model="formInfo.oldPassword"></el-input>
          </el-form-item>

          <el-form-item
                  prop="newPassword"
                  label="新密码"
                  :rules="{ required: true, message: '请输入新密码', trigger: 'blur' }"
          >
            <el-input type="password" v-model="formInfo.newPassword"></el-input>
          </el-form-item>

          <el-form-item
                  prop="confirmPassword"
                  label="确认密码"
                  :rules="{ required: true, message: '请输入确认密码', trigger: 'blur' }"
          >
            <el-input type="password" v-model="formInfo.confirmPassword"></el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" round @click="submitForm('dynamicValidateForm')">保存</el-button>
            <el-button round @click="resetForm('dynamicValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
  import ALImage from "../../../components/public/ALImage";
  import {request} from "../../../util/network/request";
  import {USER_UPDATE_PASSWORD} from "../../../util/network/api/user/api-user";

  export default {
    name: "UpdatePasswordComponent",
    //组件
    components: {ALImage},
    //属性
    props: {},

    //数据
    data() {
      return {
        formInfo: {
          uid: this.$store.state.storeUserInfo.id,
          username: this.$store.state.storeUserInfo.username,
          oldPassword: '',
          newPassword: '',
          confirmPassword: null,
        },
      }
    },

    //挂载完成时
    mounted() {

    },

    //方法
    methods: {
      goPage(path){
        this.gotoPage(path);
      },

      updatePassword() {
        request({
          url: USER_UPDATE_PASSWORD,
          method: 'post',
          data: this.qsParam(this.formInfo),
        }).then(res => {
          // console.log(res);
          if (res.data.code == 1){
            this.$message.success("修改成功，请重新登录");
          }else if (res.data.code == 0){
            this.$message.error(res.data.msg);
          }
          this.logout();
        }).catch(err => {
          console.log(err);
          this.$message.error("未知错误，请稍候重试");
        })
      },

      logout() {
        localStorage.setItem("isLogin", "no");
        localStorage.removeItem("userinfo");
        this.isLogin = false;
        this.$store.commit("setLoginState", false);

        this.goPage('/login')
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updatePassword();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
